
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>收银台|聚合支付</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <link th:href="@{/css/cashier.css}" rel="stylesheet"/>
</head>
<body>
<div style="display: none" id="formJump"></div>
<div style="max-width: 1000px; margin: 0 auto">
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item" style="font-size: 18px;">收 银 台</li>
    </ul>

    <div class="layui-card">
        <div class="layui-card-header"><span style="color: blue">您的订单已提交,请尽快完成支付,预期订单将取消!</span></div>
        <div class="layui-card-body" style="padding:10px; background-color: #f6fbff">
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <ul style="line-height: 28px;">
                        <li>订单金额：<span style="color: red; font-size: 24px;" th:text="${amount}">1.00</span> 元</li>
                    </ul>
                </div>
                <div class="layui-col-xs6">
                    <ul style="line-height: 28px;">
                        <li>订单标题：快捷支付</li>
                        <li><span th:text="'订单编号：'+${order_no}"></span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-card">
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">网银支付</li>
            </ul>
            <div class="layui-tab-content" style="padding-left: 30px; padding-bottom: 10px; padding-right: 15px;">
                <div class="layui-tab-item layui-show">
                    <form id="form" class="layui-form layui-form-pane" th:action="${payUri}"  method="post">
                        <input type="hidden" id="bank" value="">
                        <input type="hidden" id="orderId" th:value="${orderId}">
                        <div class="layui-form-item">
                            <dl id="bankCodeList" class="pay-list">
                                <dd >
                                    <a class="aborder" data-code="105" date-name="CCBccb103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="CCB" date-alt="建设银行"><span><img src="/img/bank/CCB.png" alt="建设银行" ></span></a>
                                    <!--  <a class="aborder" data-code="105"><span>建设银行</span></a>-->
                                    <a class="aborder" data-code="308" date-name="CMBcmb103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="CMB" date-alt="招商银行" ><span><img src="/img/bank/CMB.png" alt="招商银行" ></span></a>
                                    <a class="aborder" data-code="102" date-name="ICBCicbc105_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="ICBC" date-alt="中国工商银行" ><span><img src="/img/bank/ICBC.png" alt="中国工商银行" ></span></a>
                                    <a class="aborder" data-code="403" date-name="PSBCpsbcnucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="PSBC" date-alt="中国邮政储蓄"><span><img src="/img/bank/PSBC.png" alt="中国邮政储蓄" ></span></a>
                                    <a class="aborder" data-code="301" date-name="COMMcommnucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="COMM" date-alt="交通银行"><span><img src="/img/bank/COMM.png" alt="交通银行" ></span></a>
                                    <a class="aborder" data-code="104" date-name="BOCboc102_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="BOC" date-alt="中国银行" ><span><img src="/img/bank/BOC.png" alt="中国银行" ></span></a>
                                    <a class="aborder" data-code="310" date-name="SPDBspdbnucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="SPDB" date-alt="浦发银行" ><span><img src="/img/bank/SPDB.png" alt="浦发银行" ></span></a>
                                    <a class="aborder" data-code="309" date-name="CIBcib102_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="CIB" date-alt="兴业银行"><span><img src="/img/bank/CIB.png" alt="兴业银行" ></span></a>
                                    <a class="aborder" data-code="4105840" date-name="SPABANKspabanknucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="SPABANK" date-alt="平安银行" ><span><img src="/img/bank/SPABANK.png" alt="平安银行" ></span></a>
                                    <a class="aborder" data-code="303" date-name="CEBcebnucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="CEB" date-alt="光大银行" ><span><img src="/img/bank/CEB.png" alt="光大银行" ></span></a>
                                    <a class="aborder" data-code="306" date-name="GDBgdbnucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="GDB" date-alt="广发银行" ><span><img src="/img/bank/GDB.png" alt="广发银行" ></span></a>
                                    <a class="aborder" data-code="4012900" date-name="SHBANKshbanknucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="shanghaibank" date-alt="上海银行" ><span><img src="/img/bank/shanghaibank.png" alt="上海银行" ></span></a>
                                    <a class="aborder" data-code="322" date-name="SHRCBshrcbnucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="SHRCB" date-alt="上海农商银行"><span><img src="/img/bank/SHRCB.png" alt="上海农商银行" ></span></a>
                                    <a class="aborder" data-code="4083320" date-name="NBBANKnbbanknucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="NBBANK" date-alt="宁波银行" ><span><img src="/img/bank/NBBANK.png" alt="宁波银行" ></span></a>
                                    <a class="aborder" data-code="4233310" date-name="HZCBhzcbnucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="HZCB" date-alt="杭州银行" ><span><img src="/img/bank/HZCB.png" alt="杭州银行" ></span></a>
                                    <a class="aborder" data-code="4031000" date-name="BJBANKbjbanknucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="BJBANK" date-alt="北京银行" ><span><img src="/img/bank/BJBANK.png" alt="北京银行" ></span></a>
                                    <a class="aborder" data-code="4021000" date-name="BJRCBbjrcbnucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="BJRCB" date-alt="北京农商银行"><span><img src="/img/bank/BJRCB.png" alt="北京农商银行" ></span></a>
                                    <a class="aborder" data-code="4296510" date-name="CDCBcdcbnucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="CDCB" date-alt="成都银行" ><span><img src="/img/bank/CDCB.png" alt="成都银行" ></span></a>
                                    <!--  <a class="aborder" data-code="4296510"><span>成都银行</span></a>-->
                                    <a class="aborder" data-code="304" date-name="HXBANKhxbanknucc103_DEPOSIT_DEBIT_EBANK_XBOX_MODEL" date-bank="HXBANK" date-alt="华夏银行"><span><img src="/img/bank/HXBANK.png" alt="华夏银行" ></span></a>
                                </dd>
                            </dl>
                        </div>
                        <div class="layui-form-item">
                            <button style="margin-top: 15px;"  type="button" id="bank_pay_btn" class="layui-btn" lay-submit lay-filter="bank_cashier">前往支付</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>支付常见问题</legend>
        </fieldset>
        <div class="layui-collapse" lay-accordion="">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">如何使用快捷支付付款？</h2>
                <div class="layui-colla-content layui-show">
                    <p>首次开通快捷支付时,需要填写您办理银行卡的身份信息和预留手机号码,信息通过验证后,通过您接收到的短信验证码进行开通和支付开通成功后,下次可凭支付密码和短信验证码进行支付.
                    </p>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">手机已经更换,怎么更新手机号码？</h2>
                <div class="layui-colla-content">
                    <p>您需要现在银行变更手机号码</p>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">支付订单一直处理中怎么办？</h2>
                <div class="layui-colla-content">
                    <p>如遇订单处理中,如您确保已经支付成功,则等待10分钟.如果10分钟后还是处理中,请联系客服,请勿重复支付.</p>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-top: 20px;text-align: center">©2018 聚合支付</div>
</div>

<script th:src="@{/js/md5.min.js}"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script>

    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }




    $(document).ready(function () {

        $("dl#bankCodeList .aborder").each(function () {
            var  flag= IsPC(); //true为PC端，false为手机端
            if(!flag){
                var this_code = $(this).attr("data-code");
                if(this_code == "308"  || this_code == "102" || this_code == "403"  || this_code == "322" || this_code == "4083320" || this_code == "4233310" || this_code == "4031000" || this_code == "4021000" || this_code == "4296510" || this_code == "104" || this_code == "310" || this_code == "303" || this_code == "4012900"|| this_code == "304")
                {
                    $(this).remove();
                }else{
                    var alt = $(this).attr("date-alt");
                    var bank = $(this).attr("date-bank");
                    var vsrc = '/img/bank/bsmall/'+ bank + '.png';
                    $(this).html("<span><img src=" + vsrc +">"  + alt +"</span>");
                }
            }
        });
    });


    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element', 'form'], function(){
        var form = layui.form
            ,$ = layui.$
            ,element = layui.element
            ,layer = layui.layer ;

        form.on('submit(bank_cashier)', function(data) {
            var bankCode = $("#bank").val();
            if(bankCode == '' || bankCode == undefined) {
                layer.alert("请选择银行",{title: '提示'});
                return;
            }

            $("#bank_pay_btn").attr('class', "layui-btn layui-btn-disabled");  // 按钮不可用
            var load = layer.msg('正在转向银行...', {
                icon: 16
                ,shade: 0.01
                ,time: 9999999999
            });
            var url = '[[${payUri}]]';
            var orderId = '[[${orderId}]]';
            $("#form").attr("action", url+"?orderId="+orderId+"&bank="+bankCode);
            document.getElementById("form").submit();
            // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.render();

        // 选择网银银行
        $("#bankCodeList dd a").on("click", function(){
            $("#bank").val($(this).attr("date-name"));
            $.each($("#bankCodeList dd a"), function(i, n){
                $(this).attr("style", "border-color: #e2e2e2");
            });
            $(this).attr("style", "border-color: #35a7ff");
        });
    });

</script>

</body>
</html>